<template>
  <section class=" _m-2 d-flex justify-content-between align-items-center">
    <div class="icon flex-1">
      <i class="iconfont icon-gold"></i>
    </div>
    <div class="content flex-3">
      <h2>{{usersVo.gold}}</h2>
      <h2>金币余额</h2>
    </div>
    <div class="btn flex-1">
      <button class="btn btn-primary" @click="$router.push('/list/pay')">充值</button>
    </div>
  </section>
</template>

<script>

import {getUsersForCache} from 'api/UsersApi'
export default {
  name: 'WalletTop',
  data () {
    return {
      usersVo:{}
    }
  },
  methods: {
    getUsersForCache () {
      getUsersForCache({})
        .then(res => {
          if(res.meta.success) {
            this.usersVo = res.data
          }
        });
    }
  },
  created () {
    this.getUsersForCache();
  }
}
</script>

<style lang="stylus" scoped>
section {
  background #FFF
  padding 2vw 4vw

  i.iconfont {
    font-size 30px!important
    color #F4BD00
  }

  .content {
    font-size 18px
    line-height 20px

    h2 {
      margin-bottom 5px
    }
  }
}
</style>
